☁️ Loving our new documentation website? Provide feedback in the CloudCannon Community! ✨

Developer ReferenceConfiguration File

metadata[*]

Table of contents

Description:

This key represents an individual metadata entry object in the preview.metadata array.

The value is an object that can contain text, image, icon, icon_color, and icon_background_color properties. Each metadata entry is displayed on Cards in the Collection browser, Structures, and Snippets.

Appears in:
└── metadata
    └── [*]
Type:
Object
Properties:
iconArray Preview Entry|Raw Text Preview Entry|False Preview Entry#

This key defines the icon displayed on Cards in the Collection browser, Structures, and Snippets.

The value can be an array or a single value, and reference a key, template, text string, that results in one of Google's Material Symbols. When multiple entries are provided, CloudCannon will use them in order as fallback options.

For Cards in the Collection Browser, this key defaults to the value of collections_config.*.icon. Otherwise, this key has no default.

Show examplesHide examples

In this example, we have configured the icon for Cards in the blog Collection to use the edit_note icon.

Copied to clipboard
collections_config:
  blog:
    preview:
      icon: edit_note
{
  "collections_config": {
    "blog": {
      "preview": {
        "icon": "edit_note"
      }
    }
  }
}

In this example, we have configured the icon for Cards in the blog Collection with an array of values to provide fallback options. CloudCannon will use the value of logo first, then fall back to the edit_note icon.

Copied to clipboard
collections_config:
  blog:
    preview:
      icon:
        - key: logo
        - edit_note
{
  "collections_config": {
    "blog": {
      "preview": {
        "icon": [
          {
            "key": "logo"
          },
          "edit_note"
        ]
      }
    }
  }
}
icon_background_colorArray Preview Entry|Raw Text Preview Entry|False Preview Entry#

This key defines the background color of the icon displayed on Cards in the Collection browser, Structures, and Snippets.

The value can be an array or a single value, and reference a key, template, or text string. When multiple entries are provided, CloudCannon will use them in order as fallback options.

Color values can be hex codes (e.g., #ff0000), CSS color names, or reference a data key that contains a color value.

Show examplesHide examples

In this example, we have configured the icon background color for Cards in the blog Collection with an array of values to provide fallback options. CloudCannon will use the value of bg_color first, then fall back to the static hex color value.

Copied to clipboard
collections_config:
  blog:
    preview:
      icon_background_color:
        - key: bg_color
        - text: '#f0f0f0'
{
  "collections_config": {
    "blog": {
      "preview": {
        "icon_background_color": [
          {
            "key": "bg_color"
          },
          {
            "text": "#f0f0f0"
          }
        ]
      }
    }
  }
}
icon_colorArray Preview Entry|Raw Text Preview Entry|False Preview Entry#

This key defines the color of the icon displayed on Cards in the Collection browser, Structures, and Snippets.

The value can be an array or a single value, and reference a key, template, or text string. When multiple entries are provided, CloudCannon will use them in order as fallback options.

Color values can be hex codes (e.g., #ff0000), CSS color names, or reference a data key that contains a color value.

Show examplesHide examples

In this example, we have configured the icon color for Cards in the blog Collection with an array of values to provide fallback options. CloudCannon will use the value of color first, then fall back to the static hex color value.

Copied to clipboard
collections_config:
  blog:
    preview:
      icon_color:
        - key: color
        - text: '#ff0000'
{
  "collections_config": {
    "blog": {
      "preview": {
        "icon_color": [
          {
            "key": "color"
          },
          {
            "text": "#ff0000"
          }
        ]
      }
    }
  }
}
imageArray Preview Entry|Raw Text Preview Entry|False Preview Entry#

This key defines the image displayed on Cards in the Collection browser, Structures, and Snippets.

The value can be an array or a single value, and reference a key, template, or text string that results in a file path or URL to an image file. When multiple entries are provided, CloudCannon will use them in order as fallback options.

Show examplesHide examples

In this example, we have configured the image for Cards in the blog Collection with an array of values to provide fallback options. CloudCannon will use the value of featured_image first, then the {thumbnail} template, and finally fall back to the static text value.

Copied to clipboard
collections_config:
  blog:
    preview:
      image:
        - key: featured_image
        - template: '{thumbnail}'
        - text: default-image.jpg
{
  "collections_config": {
    "blog": {
      "preview": {
        "image": [
          {
            "key": "featured_image"
          },
          {
            "template": "{thumbnail}"
          },
          {
            "text": "default-image.jpg"
          }
        ]
      }
    }
  }
}

In this example, we have configured the image for Structure Cards to display the profile_picture key.

Copied to clipboard
_structures:
  staff:
    values:
      - value:
          _type: Employee
          name: 
          profile_picture: 
        preview:
          image:
            - key: profile_picture
{
  "_structures": {
    "staff": {
      "values": [
        {
          "value": {
            "_type": "Employee",
            "name": null,
            "profile_picture": null
          },
          "preview": {
            "image": [
              {
                "key": "profile_picture"
              }
            ]
          }
        }
      ]
    }
  }
}
textArray Preview Entry|Raw Text Preview Entry|False Preview Entry#

This key defines the main text displayed on Cards in the Collection browser, Structures, and Snippets.

The value can be an array or a single value, and reference a key, template, or text string. When multiple entries are provided, CloudCannon will use them in order as fallback options.

Show examplesHide examples

In this example, we have configured the main text for Cards in the blog Collection with an array of values to provide fallback options. CloudCannon will use the value of title first, then the {name} template, and finally fall back to the static text value.

Copied to clipboard
collections_config:
  blog:
    preview:
      text:
        - key: title
        - template: '{name}'
        - text: Untitled
{
  "collections_config": {
    "blog": {
      "preview": {
        "text": [
          {
            "key": "title"
          },
          {
            "template": "{name}"
          },
          {
            "text": "Untitled"
          }
        ]
      }
    }
  }
}

In this example, we have configured the main text for Cards in the blog Collection to display the title key.

Copied to clipboard
collections_config:
  blog:
    preview:
      text:
        - key: title
{
  "collections_config": {
    "blog": {
      "preview": {
        "text": [
          {
            "key": "title"
          }
        ]
      }
    }
  }
}
Examples:

In this example, we have configured a metadata entry for Cards in the blog Collection to display the URL using a template.

Copied to clipboard
collections_config:
  blog:
    preview:
      metadata:
        - template: '[url]'
{
  "collections_config": {
    "blog": {
      "preview": {
        "metadata": [
          {
            "template": "[url]"
          }
        ]
      }
    }
  }
}
Open in a new tab